<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul {
            list-style: none;
            width: 600px;

        }

        li {
            height: 50px;
        }

        p {
            display: inline-block;
            width:200px;
        }
        span{
            cursor: pointer;
            width: 50px;
            display: inline-block;
            text-align: center;
        }
    </style>
</head>

<body>
    <h2>今日新闻</h2>
    <input type="text" id="text"> <button id="btn">发布新闻</button>
    <ul class="list-new">
        <li>
            <p>吾之所念皆星河!</p><span>删除</span>
        </li>
        <li>
            <p>吾之所念皆星河!</p><span>删除</span>
        </li>
        <li>
            <p>吾之所念皆星河!</p><span>删除</span>
        </li>
    </ul>
</body>
<script>
    // 获取元素 注册事件
    var listnew = document.querySelector('.list-new');
    var text = document.getElementById('text');
    var btn = document.getElementById('btn');
    // 封装函数
    function Makyhtml() {
        // 判断输入框是否为空
        if (text.value.trim().length == 0) {
            alert('请输入内容!')
            text.value = '';
            return;
        }
        // 获取到输入框的内容
        var content = text.value;
        // 创建元素的几种方法
        // 1. 父元素.innerHTML = '新的元素结构' 这个方法会覆盖之前的元素
        // 2. document.createElement('新的元素结构') 这个方法创建元素之后会将新元素放到最后
        var li = document.createElement('li');
        li.innerHTML = '<p>' + content + '</p><span>删除</span>';
        // 将新创建的元素放到最后的用法 父元素.appendChild(新创建的子元素)
        // listnew.appendChild(li);
        // 将元素放到最前面的用法 父元素.insertBefore(新创建的子元素,listnew.children[0])
        listnew.insertBefore(li, listnew.children[0]);
        text.value = '';
        // delEvent();
    }
    // function delEvent(){
    //     var delbtn = document.querySelectorAll('.list-new span')
    //     for (let i = 0; i < delbtn.length; i++) {
    //     delbtn[i].onclick = function () {
    //         let li = this.parentNode;
    //         listnew.removeChild(li);
    //     }
    // }
    // }
    btn.onclick = function () {
        Makyhtml();
    }
    // 键盘事件 点击回车发布 获取事件源 事件源 event 是一个参数 监听事件发生
    text.onkeyup = function (e) {
        // console.log(e);
        // 如果同时按下 Ctrl 跟 回车键 就发布
        if (e.ctrlKey && e.keyCode === 13) {
            Makyhtml();
        }
    }
    // 事件委托 
    listnew.addEventListener('click', function (e) {
        // 2 当事件被触发的时候，判断一下，事件目标是否是一个指定的元素，如果是，才执行
        // 我们的要求是委托span的点击事件 ，判断点击的是否是span
        console.log(e.target.nodeName);
        if (e.target.nodeName === 'SPAN') {           
            // 如果满足条件，就把span对应的li删除
            var li = e.target.parentNode;
            listnew.removeChild(li);

        }
    });
    // listnew.onclick = function(e){
    //     console.log(e.target.nodeName);
    //     // if(e.target.nodeName === 'SPAN'){
    //     //     let li = e.target.parentNode;
    //     //     listnew.removeChild(li);
    //     // }
    // }
</script>

</html>